<template>
  <div>
      <el-row :gutter="20">
          <el-col :span="4" v-for="(o, index) in stores" :key="index" style="margin-bottom: 20px;">
              <el-card :body-style="{ padding: '0px' }">
                  <img :src="o.logo" class="image">
                  <div style="padding: 14px;">
                      <span>{{o.name}}</span>
                      <div class="bottom clearfix">
                          <time class="time">法人: {{ o.legal_person }}</time>
                          <el-button v-if="updatePermission" @click="storeLoginShow(o)" type="text" class="button">{{$t('login')}}</el-button>
                      </div>
                  </div>
              </el-card>
          </el-col>
      </el-row>


      <el-dialog :title="'请输入店铺[' + loginForm.name + ']的密码'" :visible.sync="dialogStoreLoginFormVisible" width="30%">
          <el-form :model="loginForm" ref="editForm">
              <el-form-item :label="$t('password')" prop="store_pass" :label-width="formLabelWidth">
                  <el-input type="password" v-model="loginForm.store_pass"></el-input>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
              <el-button @click="dialogEditFormVisible = false">{{ $t('cancel') }}</el-button>
              <el-button type="primary" @click="storeLogin">{{ $t('confirm') }}</el-button>
          </div>
      </el-dialog>

  </div>
</template>

<script>
import {indexByAuth, login} from '../../../api/stores'
import { responseDataFormat, tableDefaultData, editSuccess, addSuccess, deleteSuccess } from '../../../libs/tableDataHandle'
import {hasPermission} from "../../../libs/permission";
import notify from "../../../libs/notify";

export default {
    name: 'storeLogin',
    data() {
      return {
          ...tableDefaultData(),
          dialogStoreLoginFormVisible:false,
        stores:'',
          loginForm:{
            id:'',
            store_pass:'',
            name:'',
          },
      }
    },
    methods: {
        storeLoginShow(store) {
            this.dialogStoreLoginFormVisible = true
            this.loginForm.id = store.id
            this.loginForm.name = store.name
        },
        storeLogin() {
            login(this.loginForm).then(response => {
                notify.success(response.data.message, this)
                localStorage.setItem('store_token', response.data.data.token)
                window.location.href = '/admin/store/info'
            })
        },
        requestData() {
            indexByAuth().then(response => {
               this.stores = response.data.data
            })
        }
    },
    computed: {
        updatePermission() {
            return hasPermission('store.login')
        }
    },
      created() {
        this.requestData()
      }
  }
</script>

<style>
.time {
    font-size: 13px;
    color: #999;
}

.bottom {
    margin-top: 13px;
    line-height: 12px;
}

.button {
    padding: 0;
    float: right;
}

.image {
    width: 100%;
    display: block;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}
</style>
